const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build'),
  },
  //如何使用这个loader来加载css文件？有三种
  //1.内联 在js文件里面直接使用 2.cli的方式 直接在命令里面添加，现在不支持 webpck5
  //3.配置的方式 module.rules中允许我们配置多个loader（之后还会使用别的loader，完成其他文件的打包）
  //这个方式也会方便后期维护，对各个loader有一个全局的概念
  //module.rules的配置如下：rules属性对应的值是一个数据，【Rule】
  //数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性
  //test属性：用于对resource（资源）进行匹配的，通常会设置成正则
  //use属性：对应的值是一个数组[UseEntry]通过这个对象来设置一些其他的属性（
  //loader：必须有一个loader属性，对应一个字符串
  //options:可选的属性，值是一个字符串或者对象，值会被传入到loader中
  //query：目前已经使用options来替代
  //）
  //从下往上，从右往左，从后往前默认webpack
  //如何处理less文件
  //less->css 用less-loader
  module: {
    rules: [
      //Rule对象
      {
        //正则
        test: /\.css$/, //匹配资源
        use: [
          //{ loader: 'css-loader',}, //写法1
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          }, //写法2
          //抽离写法
          'postcss-loader',
          //原始写法
          // {
          //   loader: 'postcss-loader',
          //   options: {
          //     //插件postcss-preset-env比较常用（现在的css特性）包括(autoprefixer)
          //     postcssOptions: {
          //       plugins: [
          //         // require('autoprefixer'),所以不需要这个
          //         // require('postcss-preset-env'),第一种写法
          //         'postcss-preset-env',
          //       ],
          //     },
          //   },
          // },
        ],
        //loader: 'css-loader', // 写法3
      }, //css-loader
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
            },
          },
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:6].[ext]',
              // ouputPath: 'img',
            },
          },
        ],
      },
    ],
  },
  //style-loader 需要安装less 再装less-loader
  //浏览器兼容性 开发中，浏览器的兼容性，我们应该怎么处理
  //不是屏幕大小的变化，而是针对不同的浏览器支持的特性：css特性，js语法之间的兼容性
  //现在处理很建档，工程化，有相应的工具处理 autoprefiexer
  //项目到底支持哪些浏览器
  //认识browserslist工具
  //browserslist是在不同的前端工具之间，共享目标浏览器和Node.js版本的配置
  //主要是给一下的工具共享比如：Autoprefixer,Babel,postcss-preset-env,eslint-plugin-compat
  //stylelint-no-unsupported-browser-features,postcss-normalize,obsolete-webpack-plugin

  //PostCSS工具，PostCSS是一个通过Javascript来转换样式的工具
  //这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式的重置
  //但是实现这些功能，我们需要借助于PostCSS对应的插件（postcss-preset-env）

  //当我们通过@import引入css文件的时候，不会回去用postcss-loader进行处理
  //需要再使用css-loader里面的设置options的importLoaders：根据前面的loader的个数

  //file-loader
  //要处理jpg，png等格式的图片，我们对应的loader是file-loader
  //它帮助我们处理import/require()方式引入的文件资源，并放到我们输出的文件夹中

  //url-loader 和file-loader的工作方式类似，但是可以将较小的文件，转成base64
};
